<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height:2000px;
        }
    </style>
</head>
<body>
    <h1>节流</h1>
    <h1>节流</h1>
    <h1>节流</h1>
    <h1>节流</h1>
    <script>
        //节流防抖都是优化作用
        //节流原理： 事件触发后，在n秒内仅执行一次，如果在n秒内有触发事件，则不会执行
        //其原理时利用一个闭包变量来记录上次执行事件，执行函数之前，获取当前时间，和上一次进行对比，超过才执行

        //节流事件一般用与鼠标事件
        function throttle(fn ,delay = 1000){
            var lastTime = 0 ;
            return function(){
                var nowTime = Date.now()
                //只有超过规定时间才执行
                if(nowTime -lastTime >= delay){
                    //修改this指向，arguments的值
                    fn.apply(this,arguments)
                    //赋值，更新上一次时间
                    lastTime = nowTime
                }
            }
        }

        document.onscroll =throttle(function(){
            console.log('haha')
            console.log(this)
            console.log(event)
}) 
    </script>
</body>
</html>